Motion >> Repos - motion-next.git/blob

   1 <div
   2   id="integrations-freshdeskAccount"
   3   class="page-layout simple tabbed"
   4   layout="column"
   5 >
   6   <!-- HEADER -->
   7   <div class="header md-accent-bg" layout="row" layout-align="start center">
   8     <div class="white-fg" layout="row" layout-align="start center" flex>
   9       <md-button
  10         class="goto-freshdeskAccounts-button md-icon-button"
  11         aria-label="Go to freshdeskAccounts"
  12         ng-click="vm.gotoFreshdeskAccounts()"
  13         translate
  14         translate-attr-aria-label="INTEGRATIONS.GO_TO_FRESHDESKACCOUNTS"
  15       >
  16         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  17       </md-button>
  18
  19       <div layout="row" layout-align="start center">
  20         <div class="freshdeskAccount-image" hide-xs>
  21           <img ng-src="assets/images/business/freshdeskAccounts.jpg" />
  22         </div>
  23
  24         <div layout="column" layout-align="start start">
  25           <div class="h2">
  26             #{{vm.freshdeskAccount.id}}
  27             <span ng-if="vm.freshdeskAccount.name"
  28               >{{vm.freshdeskAccount.name}}</span
  29             >
  30           </div>
  31           <div class="subtitle secondary-text">
  32             <span translate="INTEGRATIONS.CREATED_AT"></span>
  33             <span>{{vm.freshdeskAccount.createdAt | date:'medium'}}</span>
  34           </div>
  35         </div>
  36       </div>
  37     </div>
  38     <div>
  39       <md-button
  40         type="submit"
  41         ng-click="vm.saveFreshdeskAccount()"
  42         ng-if="vm.crudPermissions.canEdit"
  43         class="send-button md-accent md-raised"
  44         ng-disabled="(generalForm.$invalid) || (configurationsForm.$invalid)"
  45         translate="INTEGRATIONS.SAVE"
  46         translate-attr-aria-label="INTEGRATIONS.SAVE"
  47       >
  48         SAVE
  49       </md-button>
  50     </div>
  51   </div>
  52   <!-- / HEADER -->
  53
  54   <!-- CONTENT -->
  55   <div class="content">
  56     <md-tabs
  57       md-selected="vm.selectedTab"
  58       md-stretch-tabs="always"
  59       flex
  60       layout-fill
  61       md-dynamic-height
  62     >
  63       <md-tab>
  64         <md-tab-label>
  65           <span translate="INTEGRATIONS.ACCOUNT">ACCOUNT</span>
  66         </md-tab-label>
  67         <md-tab-body>
  68           <div
  69             class="freshdeskAccount-detail-form-container general md-background-bg md-whiteframe-1dp"
  70           >
  71             <div class="pb-16" layout="row" layout-align="start center">
  72               <div class="h2 secondary-text" translate="INTEGRATIONS.GENERAL">
  73                 GENERAL
  74               </div>
  75             </div>
  76             <form name="generalForm" novalidate>
  77               <md-input-container class="md-block">
  78                 <label translate="INTEGRATIONS.NAME">Name</label>
  79                 <input
  80                   type="text"
  81                   name="name"
  82                   ng-model="vm.freshdeskAccount.name"
  83                   ng-required="true"
  84                   autofocus
  85                   ng-disabled="!vm.crudPermissions.canEdit"
  86                 />
  87
  88                 <div
  89                   ng-messages="generalForm['name'].$error"
  90                   ng-show="generalForm['name'].$touched"
  91                   role="alert"
  92                 >
  93                   <div ng-message="required">
  94                     <span translate="INTEGRATIONS.ERRORS.NAME_REQUIRED"
  95                       >Name field is required</span
  96                     >
  97                   </div>
  98                 </div>
  99               </md-input-container>
 100               <md-input-container class="md-block">
 101                 <label translate="INTEGRATIONS.USERNAME">Username</label>
 102                 <input
 103                   type="text"
 104                   name="username"
 105                   ng-model="vm.freshdeskAccount.username"
 106                   ng-required="true"
 107                   ng-disabled="!vm.crudPermissions.canEdit"
 108                 />
 109
 110                 <div
 111                   ng-messages="generalForm['username'].$error"
 112                   ng-show="generalForm['username'].$touched"
 113                   role="alert"
 114                 >
 115                   <div ng-message="required">
 116                     <span translate="INTEGRATIONS.ERRORS.USERNAME_REQUIRED"
 117                       >Username field is required</span
 118                     >
 119                   </div>
 120                 </div>
 121               </md-input-container>
 122               <md-input-container class="md-block">
 123                 <label translate="INTEGRATIONS.URI">Uri</label>
 124                 <input
 125                   type="url"
 126                   name="remoteUri"
 127                   ng-model="vm.freshdeskAccount.remoteUri"
 128                   ng-required="true"
 129                   ng-disabled="!vm.crudPermissions.canEdit"
 130                 />
 131
 132                 <div
 133                   ng-messages="generalForm['remoteUri'].$error"
 134                   ng-show="generalForm['remoteUri'].$touched"
 135                   role="alert"
 136                 >
 137                   <div ng-message="required">
 138                     <span translate="INTEGRATIONS.ERRORS.URI_REQUIRED"
 139                       >Uri field is required</span
 140                     >
 141                   </div>
 142                   <div ng-message="url">
 143                     <span translate="INTEGRATIONS.ERRORS.URI_MUST_VALID_URL"
 144                       >Uri must be a valid url http://www.xcally.com</span
 145                     >
 146                   </div>
 147                 </div>
 148               </md-input-container>
 149               <md-input-container class="md-block">
 150                 <label translate="INTEGRATIONS.APIKEY">ApiKey</label>
 151                 <input
 152                   type="text"
 153                   name="apiKey"
 154                   ng-model="vm.freshdeskAccount.apiKey"
 155                   ng-required="true"
 156                   ng-disabled="!vm.crudPermissions.canEdit"
 157                 />
 158
 159                 <div
 160                   ng-messages="generalForm['apiKey'].$error"
 161                   ng-show="generalForm['apiKey'].$touched"
 162                   role="alert"
 163                 >
 164                   <div ng-message="required">
 165                     <span translate="INTEGRATIONS.ERRORS.APIKEY_REQUIRED"
 166                       >ApiKey field is required</span
 167                     >
 168                   </div>
 169                 </div>
 170               </md-input-container>
 171               <md-input-container class="md-block">
 172                 <label translate="INTEGRATIONS.MOTIONPROXYADDRESS"
 173                   >MotionProxyAddress</label
 174                 >
 175                 <input
 176                   type="url"
 177                   name="serverUrl"
 178                   ng-model="vm.freshdeskAccount.serverUrl"
 179                   ng-disabled="!vm.crudPermissions.canEdit"
 180                 />
 181
 182                 <div class="hint">
 183                   <span translate="INTEGRATIONS.HELP.MOTIONPROXYADDRESS"></span>
 184                 </div>
 185                 <div
 186                   ng-messages="generalForm['serverUrl'].$error"
 187                   ng-show="generalForm['serverUrl'].$touched"
 188                   role="alert"
 189                 >
 190                   <div ng-message="required">
 191                     <span
 192                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_REQUIRED"
 193                       >MotionProxyAddress field is required</span
 194                     >
 195                   </div>
 196                   <div ng-message="url">
 197                     <span
 198                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_MUST_VALID_URL"
 199                       >MotionProxyAddress must be a valid url
 200                       http://www.xcally.com</span
 201                     >
 202                   </div>
 203                 </div>
 204               </md-input-container>
 205               <md-input-container class="md-block">
 206                 <label translate="INTEGRATIONS.DESCRIPTION">Description</label>
 207                 <input
 208                   type="text"
 209                   name="description"
 210                   ng-model="vm.freshdeskAccount.description"
 211                   ng-disabled="!vm.crudPermissions.canEdit"
 212                 />
 213
 214                 <div
 215                   ng-messages="generalForm['description'].$error"
 216                   ng-show="generalForm['description'].$touched"
 217                   role="alert"
 218                 >
 219                   <div ng-message="required">
 220                     <span translate="INTEGRATIONS.ERRORS.DESCRIPTION_REQUIRED"
 221                       >Description field is required</span
 222                     >
 223                   </div>
 224                 </div>
 225               </md-input-container>
 226             </form>
 227           </div>
 228         </md-tab-body>
 229       </md-tab>
 230       <md-tab>
 231         <md-tab-label>
 232           <span translate="INTEGRATIONS.CONFIGURATIONS">CONFIGURATIONS</span>
 233         </md-tab-label>
 234         <md-tab-body>
 235           <div
 236             class="freshdeskAccount-detail-form-container configurations md-background-bg md-whiteframe-1dp"
 237           >
 238             <div class="pb-16" layout="row" layout-align="start center">
 239               <div
 240                 class="h2 secondary-text"
 241                 translate="INTEGRATIONS.CONFIGURATIONS"
 242               >
 243                 CONFIGURATIONS
 244               </div>
 245             </div>
 246             <div
 247               ng-controller="FreshdeskAccountConfigurationsController as vm_cc"
 248               ng-init="vm_cc.init(vm.freshdeskAccount, vm.crudPermissions)"
 249               layout="row"
 250             >
 251               <md-card class="md-whiteframe-1dp" flex="30">
 252                 <div layout="row" layout-align="center center">
 253                   <md-subheader flex="75" class="md-no-sticky"
 254                     >{{ 'INTEGRATIONS.CONFIGURATIONS' | translate
 255                     }}</md-subheader
 256                   >
 257                   <md-button
 258                     flex="25"
 259                     ng-if="vm_cc.crudPermissions.canEdit"
 260                     ng-click="vm_cc.createOrEditFreshdeskConfiguration($event)"
 261                     class="md-icon-button"
 262                     aria-label="create freshdeskConfiguration"
 263                   >
 264                     <md-icon md-font-icon="icon-plus"></md-icon>
 265                   </md-button>
 266                 </div>
 267                 <md-list>
 268                   <md-list-item
 269                     layout="row"
 270                     layout-align="center center"
 271                     ng-repeat="freshdeskConfiguration in vm_cc.configurations"
 272                     class="border-top"
 273                     md-colors="{background: (vm_cc.selectedFreshdeskConfiguration == $index ? 'accent' : 'grey-A100')}"
 274                     ng-click="vm_cc.getFreshdeskConfiguration($index)"
 275                   >
 276                     <span class="text-truncate" flex="80"
 277                       >{{ freshdeskConfiguration.name }}</span
 278                     >
 279                     <md-menu ng-if="vm_cc.crudPermissions.canDelete">
 280                       <md-button
 281                         class="md-icon-button"
 282                         aria-label="More"
 283                         translate
 284                         translate-attr-aria-label="INTEGRATIONS.MORE"
 285                         ng-click="$mdOpenMenu($event)"
 286                       >
 287                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 288                       </md-button>
 289                       <md-menu-content width="3">
 290                         <md-menu-item ng-if="vm_cc.crudPermissions.canDelete">
 291                           <md-button
 292                             ng-click="vm_cc.deleteFreshdeskConfiguration($event, freshdeskConfiguration)"
 293                             translate="INTEGRATIONS.DELETE_FRESHDESKCONFIGURATION"
 294                           >
 295                             Delete FreshdeskConfiguration
 296                           </md-button>
 297                         </md-menu-item>
 298                       </md-menu-content>
 299                     </md-menu>
 300                   </md-list-item>
 301                 </md-list>
 302               </md-card>
 303               <div flex></div>
 304               <md-card class="md-whiteframe-1dp" flex="65">
 305                 <md-tabs ng-if="vm_cc.configurations.length" md-dynamic-height>
 306                   <md-tab>
 307                     <md-tab-label>
 308                       <span translate="INTEGRATIONS.SUBJECTS">SUBJECTS</span>
 309                     </md-tab-label>
 310                     <md-tab-body>
 311                       <md-toolbar
 312                         class="md-table-toolbar md-default no-padding"
 313                         ng-hide="vm_cc.selectedSubjects.length"
 314                       >
 315                         <div class="md-toolbar-tools">
 316                           <div flex></div>
 317                           <ms-search-bar
 318                             on-search="vm_cc.query.subject = query"
 319                             on-collapse="vm_cc.query.subject = undefined"
 320                             debounce="300"
 321                           ></ms-search-bar>
 322                           <md-button
 323                             ng-if="vm_cc.crudPermissions.canEdit"
 324                             class="md-icon-button"
 325                             ng-click="vm_cc.createOrEditSubject($event)"
 326                             aria-label="add subject"
 327                             translate
 328                             translate-attr-label="INTEGRATIONS.ADD_SUBJECT"
 329                           >
 330                             <md-icon md-font-icon="icon-plus"></md-icon>
 331                           </md-button>
 332                         </div>
 333                       </md-toolbar>
 334                       <md-toolbar
 335                         class="md-table-toolbar md-accent"
 336                         ng-show="vm_cc.selectedSubjects.length"
 337                       >
 338                         <div class="md-toolbar-tools">
 339                           <span class="md-subhead"
 340                             >{{vm_cc.selectedSubjects.length}}
 341                             {{vm_cc.selectedSubjects.length > 1 ? 'items' :
 342                             'item'}} selected</span
 343                           >
 344                           <div flex></div>
 345                           <md-button
 346                             ng-if="vm_cc.crudPermissions.canDelete"
 347                             class="md-icon-button"
 348                             ng-click="vm_cc.deleteSelectedSubjects($event)"
 349                             aria-label="delete selected"
 350                             translate
 351                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 352                           >
 353                             <md-icon md-font-icon="icon-delete"></md-icon>
 354                           </md-button>
 355                         </div>
 356                       </md-toolbar>
 357                       <md-table-container
 358                         class="md-whiteframe-1dp padding-horizontal"
 359                       >
 360                         <table
 361                           md-table
 362                           md-row-select
 363                           multiple
 364                           ng-model="vm_cc.selectedSubjects"
 365                         >
 366                           <thead md-head>
 367                             <tr md-row>
 368                               <th md-column>
 369                                 {{ 'INTEGRATIONS.ID' | translate }}
 370                               </th>
 371                               <th md-column>
 372                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 373                               </th>
 374                               <th md-column>
 375                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 376                               </th>
 377                               <th md-column width="10px"></th>
 378                             </tr>
 379                           </thead>
 380                           <tbody md-body>
 381                             <tr
 382                               md-row
 383                               md-select="subject"
 384                               md-select-id="id"
 385                               ng-repeat="subject in vm_cc.subjects | filter: vm_cc.query.subject"
 386                             >
 387                               <td
 388                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 389                                 md-cell
 390                                 class="id"
 391                               >
 392                                 {{subject.id}}
 393                               </td>
 394                               <td
 395                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 396                                 md-cell
 397                                 class="type"
 398                               >
 399                                 <span ng-if="subject.FieldId"
 400                                   >{{subject.nameField ||
 401                                   subject.idField}}</span
 402                                 >
 403                                 <span ng-if="!subject.FieldId"
 404                                   >{{subject.type}}</span
 405                                 >
 406                               </td>
 407                               <td
 408                                 ng-switch="subject.type"
 409                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 410                                 md-cell
 411                               >
 412                                 <span ng-switch-when="string"
 413                                   >{{subject.content}}</span
 414                                 >
 415                                 <span
 416                                   ng-switch-when="variable"
 417                                   class="text-boxed"
 418                                   >{{subject.variableName}}</span
 419                                 >
 420                                 <span
 421                                   ng-switch-when="customVariable"
 422                                   class="text-boxed"
 423                                   >{{
 424                                   vm_cc.variablesById[subject.VariableId].name
 425                                   }}</span
 426                                 >
 427                                 <span ng-switch-when="keyValue">
 428                                   {{subject.key}}
 429                                   <span ng-switch="description.keyType">
 430                                     <span ng-switch-when="string"
 431                                       >{{subject.keyContent}}</span
 432                                     >
 433                                     <span
 434                                       ng-switch-when="variable"
 435                                       class="text-boxed"
 436                                       >{{subject.variableName}}</span
 437                                     >
 438                                     <span
 439                                       ng-switch-when="customVariable"
 440                                       class="text-boxed"
 441                                       >{{
 442                                       vm_cc.variablesById[subject.VariableId].name
 443                                       }}</span
 444                                     >
 445                                   </span>
 446                                 </span>
 447                                 <span ng-switch-default
 448                                   >{{subject.content}}</span
 449                                 >
 450                               </td>
 451                               <td
 452                                 md-cell
 453                                 class="actions"
 454                                 ng-if="!vm_cc.crudPermissions.readOnly"
 455                               >
 456                                 <md-menu>
 457                                   <md-button
 458                                     class="md-icon-button"
 459                                     aria-label="More"
 460                                     translate
 461                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 462                                     ng-click="$mdOpenMenu($event)"
 463                                   >
 464                                     <md-icon
 465                                       md-font-icon="icon-dots-vertical"
 466                                     ></md-icon>
 467                                   </md-button>
 468
 469                                   <md-menu-content width="3">
 470                                     <md-menu-item
 471                                       ng-if="vm_cc.crudPermissions.canEdit"
 472                                     >
 473                                       <md-button
 474                                         ng-click="vm_cc.createOrEditSubject($event, subject)"
 475                                         translate="INTEGRATIONS.EDIT_SUBJECT"
 476                                       >
 477                                         Edit Subject
 478                                       </md-button>
 479                                     </md-menu-item>
 480                                     <md-menu-item
 481                                       ng-if="vm_cc.crudPermissions.canDelete"
 482                                     >
 483                                       <md-button
 484                                         ng-click="vm_cc.deleteSubjectConfirm($event, subject)"
 485                                         translate="INTEGRATIONS.DELETE_SUBJECT"
 486                                       >
 487                                         Delete Subject
 488                                       </md-button>
 489                                     </md-menu-item>
 490                                   </md-menu-content>
 491                                 </md-menu>
 492                               </td>
 493                             </tr>
 494                           </tbody>
 495                         </table>
 496                       </md-table-container>
 497                     </md-tab-body>
 498                   </md-tab>
 499
 500                   <md-tab>
 501                     <md-tab-label>
 502                       <span translate="INTEGRATIONS.DESCRIPTIONS"
 503                         >DESCRIPTIONS</span
 504                       >
 505                     </md-tab-label>
 506                     <md-tab-body>
 507                       <md-toolbar
 508                         class="md-table-toolbar md-default no-padding"
 509                         ng-hide="vm_cc.selectedDescriptions.length"
 510                       >
 511                         <div class="md-toolbar-tools">
 512                           <div flex></div>
 513                           <ms-search-bar
 514                             on-search="vm_cc.query.description = query"
 515                             on-collapse="vm_cc.query.description = undefined"
 516                             debounce="300"
 517                           ></ms-search-bar>
 518                           <md-button
 519                             ng-if="vm_cc.crudPermissions.canEdit"
 520                             class="md-icon-button"
 521                             ng-click="vm_cc.createOrEditDescription($event)"
 522                             aria-label="add description"
 523                             translate
 524                             translate-attr-label="INTEGRATIONS.ADD_DESCRIPTION"
 525                           >
 526                             <md-icon md-font-icon="icon-plus"></md-icon>
 527                           </md-button>
 528                         </div>
 529                       </md-toolbar>
 530                       <md-toolbar
 531                         class="md-table-toolbar md-accent"
 532                         ng-show="vm_cc.selectedDescriptions.length"
 533                       >
 534                         <div class="md-toolbar-tools">
 535                           <span class="md-subhead"
 536                             >{{vm_cc.selectedDescriptions.length}}
 537                             {{vm_cc.selectedDescriptions.length > 1 ? 'items' :
 538                             'item'}} selected</span
 539                           >
 540                           <div flex></div>
 541                           <md-button
 542                             ng-if="vm_cc.crudPermissions.canDelete"
 543                             class="md-icon-button"
 544                             ng-click="vm_cc.deleteSelectedDescriptions($event)"
 545                             aria-label="delete selected"
 546                             translate
 547                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 548                           >
 549                             <md-icon md-font-icon="icon-delete"></md-icon>
 550                           </md-button>
 551                         </div>
 552                       </md-toolbar>
 553                       <md-table-container
 554                         class="md-whiteframe-1dp padding-horizontal"
 555                       >
 556                         <table
 557                           md-table
 558                           md-row-select
 559                           multiple
 560                           ng-model="vm_cc.selectedDescriptions"
 561                         >
 562                           <thead md-head>
 563                             <tr md-row>
 564                               <th md-column>
 565                                 {{ 'INTEGRATIONS.ID' | translate }}
 566                               </th>
 567                               <th md-column>
 568                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 569                               </th>
 570                               <th md-column>
 571                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 572                               </th>
 573                               <th md-column width="10px"></th>
 574                             </tr>
 575                           </thead>
 576                           <tbody md-body>
 577                             <tr
 578                               md-row
 579                               md-select="description"
 580                               md-select-id="id"
 581                               ng-repeat="description in vm_cc.descriptions | filter: vm_cc.query.description"
 582                             >
 583                               <td
 584                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 585                                 md-cell
 586                                 class="id"
 587                               >
 588                                 {{description.id}}
 589                               </td>
 590                               <td
 591                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 592                                 md-cell
 593                                 class="type"
 594                               >
 595                                 <span ng-if="description.FieldId"
 596                                   >{{description.nameField ||
 597                                   description.idField}}</span
 598                                 >
 599                                 <span ng-if="!description.FieldId"
 600                                   >{{description.type}}</span
 601                                 >
 602                               </td>
 603                               <td
 604                                 ng-switch="description.type"
 605                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 606                                 md-cell
 607                               >
 608                                 <span ng-switch-when="string"
 609                                   >{{description.content}}</span
 610                                 >
 611                                 <span
 612                                   ng-switch-when="variable"
 613                                   class="text-boxed"
 614                                   >{{description.variableName}}</span
 615                                 >
 616                                 <span
 617                                   ng-switch-when="customVariable"
 618                                   class="text-boxed"
 619                                   >{{
 620                                   vm_cc.variablesById[description.VariableId].name
 621                                   }}</span
 622                                 >
 623                                 <span ng-switch-when="keyValue">
 624                                   {{description.key}}
 625                                   <span ng-switch="description.keyType">
 626                                     <span ng-switch-when="string"
 627                                       >{{description.keyContent}}</span
 628                                     >
 629                                     <span
 630                                       ng-switch-when="variable"
 631                                       class="text-boxed"
 632                                       >{{description.variableName}}</span
 633                                     >
 634                                     <span
 635                                       ng-switch-when="customVariable"
 636                                       class="text-boxed"
 637                                       >{{
 638                                       vm_cc.variablesById[description.VariableId].name
 639                                       }}</span
 640                                     >
 641                                   </span>
 642                                 </span>
 643                                 <span ng-switch-default
 644                                   >{{description.content}}</span
 645                                 >
 646                               </td>
 647                               <td
 648                                 md-cell
 649                                 class="actions"
 650                                 ng-if="!vm_cc.crudPermissions.readOnly"
 651                               >
 652                                 <md-menu>
 653                                   <md-button
 654                                     class="md-icon-button"
 655                                     aria-label="More"
 656                                     translate
 657                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 658                                     ng-click="$mdOpenMenu($event)"
 659                                   >
 660                                     <md-icon
 661                                       md-font-icon="icon-dots-vertical"
 662                                     ></md-icon>
 663                                   </md-button>
 664
 665                                   <md-menu-content width="3">
 666                                     <md-menu-item
 667                                       ng-if="vm_cc.crudPermissions.canEdit"
 668                                     >
 669                                       <md-button
 670                                         ng-click="vm_cc.createOrEditDescription($event, description)"
 671                                         translate="INTEGRATIONS.EDIT_DESCRIPTION"
 672                                       >
 673                                         Edit Description
 674                                       </md-button>
 675                                     </md-menu-item>
 676                                     <md-menu-item
 677                                       ng-if="vm_cc.crudPermissions.canDelete"
 678                                     >
 679                                       <md-button
 680                                         ng-click="vm_cc.deleteDescriptionConfirm($event, description)"
 681                                         translate="INTEGRATIONS.DELETE_DESCRIPTION"
 682                                       >
 683                                         Delete Description
 684                                       </md-button>
 685                                     </md-menu-item>
 686                                   </md-menu-content>
 687                                 </md-menu>
 688                               </td>
 689                             </tr>
 690                           </tbody>
 691                         </table>
 692                       </md-table-container>
 693                     </md-tab-body>
 694                   </md-tab>
 695
 696                   <md-tab>
 697                     <md-tab-label>
 698                       <span translate="INTEGRATIONS.FIELDS">FIELDS</span>
 699                     </md-tab-label>
 700                     <md-tab-body>
 701                       <md-toolbar
 702                         class="md-table-toolbar md-default no-padding"
 703                         ng-hide="vm_cc.selectedFields.length"
 704                       >
 705                         <div class="md-toolbar-tools">
 706                           <div flex></div>
 707                           <ms-search-bar
 708                             on-search="vm_cc.query.field = query"
 709                             on-collapse="vm_cc.query.field = undefined"
 710                             debounce="300"
 711                           ></ms-search-bar>
 712                           <md-button
 713                             ng-if="vm_cc.crudPermissions.canEdit"
 714                             class="md-icon-button"
 715                             ng-click="vm_cc.createOrEditField($event)"
 716                             aria-label="add field"
 717                             translate
 718                             translate-attr-label="INTEGRATIONS.ADD_FIELD"
 719                           >
 720                             <md-icon md-font-icon="icon-plus"></md-icon>
 721                           </md-button>
 722                         </div>
 723                       </md-toolbar>
 724                       <md-toolbar
 725                         class="md-table-toolbar md-accent"
 726                         ng-show="vm_cc.selectedFields.length"
 727                       >
 728                         <div class="md-toolbar-tools">
 729                           <span class="md-subhead"
 730                             >{{vm_cc.selectedFields.length}}
 731                             {{vm_cc.selectedFields.length > 1 ? 'items' :
 732                             'item'}} selected</span
 733                           >
 734                           <div flex></div>
 735                           <md-button
 736                             ng-if="vm_cc.crudPermissions.canDelete"
 737                             class="md-icon-button"
 738                             ng-click="vm_cc.deleteSelectedFields($event)"
 739                             aria-label="delete selected"
 740                             translate
 741                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 742                           >
 743                             <md-icon md-font-icon="icon-delete"></md-icon>
 744                           </md-button>
 745                         </div>
 746                       </md-toolbar>
 747                       <md-table-container
 748                         class="md-whiteframe-1dp padding-horizontal"
 749                       >
 750                         <table
 751                           md-table
 752                           md-row-select
 753                           multiple
 754                           ng-model="vm_cc.selectedFields"
 755                         >
 756                           <thead md-head>
 757                             <tr md-row>
 758                               <th md-column>
 759                                 {{ 'INTEGRATIONS.ID' | translate }}
 760                               </th>
 761                               <th md-column>
 762                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 763                               </th>
 764                               <th md-column>
 765                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 766                               </th>
 767                               <th md-column width="10px"></th>
 768                             </tr>
 769                           </thead>
 770                           <tbody md-body>
 771                             <tr
 772                               md-row
 773                               md-select="field"
 774                               md-select-id="id"
 775                               ng-repeat="field in vm_cc.fields | filter: vm_cc.query.field"
 776                             >
 777                               <td
 778                                 ng-click="vm_cc.createOrEditField($event, field)"
 779                                 md-cell
 780                                 class="id"
 781                               >
 782                                 {{field.id}}
 783                               </td>
 784                               <td
 785                                 ng-click="vm_cc.createOrEditField($event, field)"
 786                                 md-cell
 787                                 class="type"
 788                               >
 789                                 <span ng-if="field.FieldId"
 790                                   >{{field.nameField || field.idField}}</span
 791                                 >
 792                                 <span ng-if="!field.FieldId"
 793                                   >{{field.type}}</span
 794                                 >
 795                               </td>
 796                               <td
 797                                 ng-switch="field.type"
 798                                 ng-click="vm_cc.createOrEditField($event, field)"
 799                                 md-cell
 800                               >
 801                                 <span ng-switch-when="string"
 802                                   >{{field.content}}</span
 803                                 >
 804                                 <span
 805                                   ng-switch-when="variable"
 806                                   class="text-boxed"
 807                                   >{{field.variableName}}</span
 808                                 >
 809                                 <span
 810                                   ng-switch-when="customVariable"
 811                                   class="text-boxed"
 812                                   >{{ vm_cc.variablesById[field.VariableId].name
 813                                   }}</span
 814                                 >
 815                                 <span ng-switch-when="keyValue">
 816                                   {{field.key}}
 817                                   <span ng-switch="description.keyType">
 818                                     <span ng-switch-when="string"
 819                                       >{{field.keyContent}}</span
 820                                     >
 821                                     <span
 822                                       ng-switch-when="variable"
 823                                       class="text-boxed"
 824                                       >{{field.variableName}}</span
 825                                     >
 826                                     <span
 827                                       ng-switch-when="customVariable"
 828                                       class="text-boxed"
 829                                       >{{
 830                                       vm_cc.variablesById[field.VariableId].name
 831                                       }}</span
 832                                     >
 833                                   </span>
 834                                 </span>
 835                                 <span ng-switch-default>{{field.content}}</span>
 836                               </td>
 837                               <td
 838                                 md-cell
 839                                 class="actions"
 840                                 ng-if="!vm_cc.crudPermissions.readOnly"
 841                               >
 842                                 <md-menu>
 843                                   <md-button
 844                                     class="md-icon-button"
 845                                     aria-label="More"
 846                                     translate
 847                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 848                                     ng-click="$mdOpenMenu($event)"
 849                                   >
 850                                     <md-icon
 851                                       md-font-icon="icon-dots-vertical"
 852                                     ></md-icon>
 853                                   </md-button>
 854
 855                                   <md-menu-content width="3">
 856                                     <md-menu-item
 857                                       ng-if="vm_cc.crudPermissions.canEdit"
 858                                     >
 859                                       <md-button
 860                                         ng-click="vm_cc.createOrEditField($event, field)"
 861                                         translate="INTEGRATIONS.EDIT_FIELD"
 862                                       >
 863                                         Edit Field
 864                                       </md-button>
 865                                     </md-menu-item>
 866                                     <md-menu-item
 867                                       ng-if="vm_cc.crudPermissions.canDelete"
 868                                     >
 869                                       <md-button
 870                                         ng-click="vm_cc.deleteFieldConfirm($event, field)"
 871                                         translate="INTEGRATIONS.DELETE_FIELD"
 872                                       >
 873                                         Delete Field
 874                                       </md-button>
 875                                     </md-menu-item>
 876                                   </md-menu-content>
 877                                 </md-menu>
 878                               </td>
 879                             </tr>
 880                           </tbody>
 881                         </table>
 882                       </md-table-container>
 883                     </md-tab-body>
 884                   </md-tab>
 885
 886                   <md-tab>
 887                     <md-tab-label>
 888                       <span translate="INTEGRATIONS.TAGS">TAGS</span>
 889                     </md-tab-label>
 890                     <md-tab-body>
 891                       <md-table-container class="md-whiteframe-1dp padding-20">
 892                         <md-input-container class="md-block">
 893                           <label translate="INTEGRATIONS.TAGS">Tags</label>
 894                           <md-select
 895                             ng-model="vm_cc.selectedTags"
 896                             ng-change="vm_cc.selectTagsChanged($event)"
 897                             multiple
 898                           >
 899                             <md-option
 900                               ng-value="tag.id"
 901                               ng-repeat="tag in vm_cc.tags"
 902                               >{{ tag.name }}</md-option
 903                             >
 904                           </md-select>
 905                         </md-input-container>
 906                       </md-table-container>
 907                     </md-tab-body>
 908                   </md-tab>
 909                 </md-tabs>
 910                 <div
 911                   class="padding-20"
 912                   ng-if="!vm_cc.configurations.length && vm_cc.crudPermissions.canEdit"
 913                   ng-click="vm_cc.createOrEditFreshdeskConfiguration($event)"
 914                   layout="row"
 915                   layout-sm="column"
 916                   layout-align="center center"
 917                   layout-wrap
 918                 >
 919                   <div
 920                     class="padding-20 md-whiteframe-3dp md-accent-bg"
 921                     layout="column"
 922                     layout-align="center center"
 923                   >
 924                     <md-button class="md-icon-button">
 925                       <md-icon md-font-icon="icon-plus"></md-icon>
 926                     </md-button>
 927                     <span
 928                       aria-label="add configuration"
 929                       translate
 930                       translate-attr-label="INTEGRATIONS.ADD_CONFIGURATION"
 931                       >ADD CONFIGURATION</span
 932                     >
 933                   </div>
 934                 </div>
 935               </md-card>
 936             </div>
 937           </div>
 938         </md-tab-body>
 939       </md-tab>
 940     </md-tabs>
 941   </div>
 942   <!-- / CONTENT -->
 943 </div>